<template>
    <div class="app-container">
        <!-- 搜索框 -->
        <el-form :model="menuSearch" ref="queryForm" size="small" :inline="true" style="margin-left: 2px;">
            <el-form-item label="菜单名称">
                <el-input placeholder="请输入菜单名称" prefix-icon="el-icon-search" clearable v-model="menuSearch.menuName" />
            </el-form-item>
            <el-form-item label="状态">
                <el-select placeholder="菜单状态" clearable v-model="menuSearch.status">
                    <el-option v-for="item in menuStatusList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getMenuList(menuSearch)">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetSearch()">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" style="padding-left: -5px; padding-bottom: 10px;">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="small"
                    @click="handleAdd(undefined)">新增</el-button>
            </el-col>
        </el-row>

        <!-- 显示主体 -->
        <el-table :data="menuList" style="width: 100%" row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column label="菜单名称" width="160" prop="menuName">
            </el-table-column>
            <el-table-column prop="icon" label="图标" align="center" width="100">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"> </i>
                </template>
            </el-table-column>
            <el-table-column prop="orderNum" label="分类" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.menuType === 'M'">目录</el-tag>
                    <el-tag v-else-if="scope.row.menuType === 'C'">菜单</el-tag>
                    <el-tag v-else-if="scope.row.menuType === 'F'">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="orderNum" label="排序" align="center" width="60">
            </el-table-column>
            <el-table-column prop="perms" label="权限标识符" align="center" width="160">
            </el-table-column>
            <el-table-column prop="component" label="组件路径" align="center" width="160">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center" width="80">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
                    <el-tag v-else type="danger">冻结</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="160">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain icon="el-icon-plus"
                        @click="handleAdd(scope.row)">新增</el-button>
                    <el-button size="mini" type="warning" plain icon="el-icon-edit"
                        @click="handleUpdate(scope.row)">修改</el-button>

                    <el-button size="mini" type="danger" plain icon="el-icon-delete" slot="reference"
                        @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加修改时的对话框 -->
        <el-dialog :title="dialogTitel" :visible.sync="dialogFormVisible">
            <el-form :model="menu" :rules="rules" ref="menu">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="上级菜单" label-width="120px">
                            <el-cascader v-model="menu.parentId" :props="props" :options="menuSelect"
                                :show-all-levels="false" :clearable="true" style="width: '600px'" placeholder='请选择下级菜单'
                                :disabled="menu.menuType === 'M'" ref='cascader'></el-cascader>
                            <!-- -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="菜单类型" label-width="120px">
                            <el-radio-group v-model="menu.menuType" @input="resetEmnu(menu.menuType)">
                                <el-radio label="M">目录</el-radio>
                                <el-radio label="C">菜单</el-radio>
                                <el-radio label="F">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="菜单图标" label-width="120px">
                            <el-input v-model="menu.icon" placeholder="请输入前图标名称" prop="icon" :prefix-icon="menu.icon"
                                :disabled="menu.menuType === 'F'">
                                <el-button slot="append" icon="el-icon-setting" @click="openIconsDialog('prefix-icon')">
                                    选择
                                </el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="组件路径" label-width="120px">
                            <el-input v-model="menu.component" :placeholder="menu.menuType === 'M' ? 'Layout' : '请输入组件路径'"
                                :disabled="menu.menuType === 'M' || menu.menuType === 'F'" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="menuName" label-width="120px">
                            <el-input v-model="menu.menuName" placeholder="请输入菜单名称" prop="menuName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示排序" prop="orderNum" label-width="120px">
                            <el-input-number v-model="menu.orderNum" controls-position="right" :min="0" :max="10"
                                style="width: 240px;" prop="menuName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路由地址" label-width="120px">
                            <el-input v-model="menu.path" placeholder="请输入路由地址" :disabled="menu.menuType === 'F'" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="权限标识" label-width="120px">
                            <el-input v-model="menu.perms" placeholder="请输入权限标识" :disabled="menu.menuType === 'M'" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示状态" prop="visible" label-width="120px">
                            <el-radio-group v-model="menu.visible">
                                <el-radio :label="0">显示</el-radio>
                                <el-radio :label="1">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单状态" prop="status" label-width="120px">
                            <el-radio-group v-model="menu.status">
                                <el-radio :label="0">正常</el-radio>
                                <el-radio :label="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelFrom">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
        <icons-dialog :visible.sync="iconsVisible" :current="menu.icon" @select="setIcon" />
    </div>
</template>
<script>
import menu from "@/api/menu"
import dict from "@/api/dict"
import IconsDialog from "@/components/IconDialog"

export default {
    components: {
        IconsDialog
    },
    data() {
        return {
            dialogTitel: '添加菜单',
            menuList: [], // 菜单列表
            menuStatusList: [], // 菜单状态列表
            dialogFormVisible: false, // 新增/修改对话框显示开关
            iconsVisible: false, // 图标对话框显示开关
            // 菜单类
            menu: {
                menuType: "M",
                visible: 0,
                status: 0
            },
            // 菜单搜索
            menuSearch: {},
            menuSelect: [], // 菜单级联列表
            // 菜单级联列表相关配置
            props: {
                checkStrictly: true,
                emitPath: false,
            },
            rules: {
                menuName: [
                    { required: true, message: "菜单名称不能为空", trigger: "blur" }
                ],
                orderNum: [
                    { required: true, message: "菜单顺序不能为空", trigger: "blur" }
                ]
            }
        }
    },

    mounted() {
        // this.getMenu(0)
        this.getStatus('sys_normal_disable')
        this.getMenuSelectVoAll()
        this.getMenuList(this.menuSearch)
    },
    methods: {
        // 清空搜索框
        resetSearch() {
            this.menuSearch = {}
        },
        // 获取菜单全部信息
        getMenuList(menuSearch) {
            menu.getMenuList(menuSearch).then(res => {
                this.menuList = res.data
            })
        },
        //删除为空的子节点
        deleteIsNullChildren(node) {
            if (!node.children || node.children.length === 0) {
                delete node.children;
                return;
            }

            for (let i = node.children.length - 1; i >= 0; i--) {
                let child = node.children[i];
                this.deleteIsNullChildren(child);
            }
        },
        // 获取菜单级联列表
        getMenuSelectVoAll() {
            menu.getMenuSelectVoAll().then(res => {
                let obj = res.data
                for (let o of obj) {
                    this.deleteIsNullChildren(o)
                }
                this.menuSelect = obj
            })
        },
        // 添加菜单
        handleAdd(obj) {
            this.dialogTitel = '添加菜单'
            this.reset()
            this.dialogFormVisible = true
            if (obj === undefined) {
                this.menu.menuType = "M"
                this.menu.parentId = 0
                return
            }
            this.menu.parentId = obj.id
            // 解决在组件未加载时调用$refs报空问题
            this.$nextTick(() => {
                if (this.$refs['cascader']) {
                    this.$refs['cascader'].inputValue = obj.menuName

                    if (obj.menuType === 'M') {
                        this.menu.menuType = 'C'
                        return
                    }

                    this.menu.menuType = 'F'
                }
            })


        },
        // 修改菜单
        handleUpdate(obj) {
            this.dialogTitel = '修改菜单'
            this.menu = obj
            this.$nextTick(() => {
                if (this.$refs['cascader']) {
                    this.$refs['cascader'].inputValue = obj.parentName
                }
            })
            this.getMenuList(this.menuSearch)
            this.dialogFormVisible = true
        },

        // 删除菜单
        handleDelete(id) {
            menu.deleteMenu(id).then(res => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.getMenuList(this.menuSearch)
            })
        },
        // 点击菜单分类时，清空对应菜单不需要填写的值
        resetEmnu(type) {
            if (type === 'M') {
                this.menu.parentId = null
                this.menu.component = null
                this.menu.perms = null
                this.$refs['cascader'].inputValue = ''
            } else if (type === 'F') {
                this.menu.component = null;
                this.menu.path = null;
                this.menu.icon = null
            }
        },
        cancelFrom() {
            this.reset();
            this.dialogFormVisible = false
        },
        // 表单重置
        reset() {
            this.menu = {
                menuType: "M",
                isCache: "0",
                visible: 0,
                status: 0,
                parentId: null,
                component: null,
                perms: null,
                path: null,
                icon: null,
                menuName: null
            };
            this.$nextTick(() => {
                if (this.$refs['cascader']) {
                    this.$refs['cascader'].inputValue = ''
                }
            })
        },

        // 提交菜单表单
        submitForm() {
            this.$refs["menu"].validate(valid => {
                if (valid) {
                    if (this.menu.id != undefined) {
                        menu.updateMenu(this.menu).then(response => {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.getMenuList(this.menuSearch)
                            this.dialogFormVisible = false;
                        })

                    } else {
                        menu.saveMenu(this.menu).then(response => {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.getMenuList(this.menuSearch)
                            this.dialogFormVisible = false;
                        });

                    }
                }
            })
        },

        // 通过父 id 获取表单数据
        // getMenu(id) {
        //     menu.getMenuAllByParentId(id).then(res => {
        //         this.menuList = res.data
        //     })
        // },
        // 通过父 id 获取表单数据，懒加载
        load(tree, treeNode, resolve) {
            menu.getMenuAllByParentId(tree.id).then(res => {
                resolve(res.data)
            })
        },
        getStatus(code) {
            dict.getBlogDictByCode(code).then(res => {
                this.menuStatusList = res.data
            })
        },
        // 选择图标
        setIcon(val) {
            // 使用 vue 的响应代理
            this.$set(this.menu, 'icon', val);
        },
        openIconsDialog(model) {
            this.iconsVisible = true
            // this.currentIconModel = model
        }
    },

}

</script>
<style scoped>
::v-deep th {
    background-color: #f8f8f9;
}

::v-deep .el-cascader .el-input__inner {
    width: 600px;
}

::v-deep .el-dialog {
    margin-top: 5vh !important;
}

/* ::v-deep input::-webkit-input-placeholder {
    color: #717171 !important;
} */
</style>